<template>
    <div>
      <!-- 删除提示框 -->
      <el-dialog title="提示" v-model="delVisible" width="300px" center @close="handleClose">
        <div class="del-dialog-cnt" align="center">删除不可恢复，是否确定删除？</div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancelRow">取 消</el-button>
            <el-button type="primary" @click="confirm">确 定</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
</template>
  
<script setup lang="ts">
  import { defineComponent, getCurrentInstance, toRefs, watch, ref } from "vue";
  // 无需导入defineProps和defineEmits，它们是编译时可用的
  const props = defineProps({
    delVisible: Boolean,
  });

  const emit = defineEmits(["cancelRow", "confirm","closeDialog"]);

  // 这里定义一个响应式状态，以便跟踪对话框的可见性
//   const centerDialogVisible = ref(props.delVisible);
    const { delVisible } = toRefs(props);
    const centerDialogVisible = ref(delVisible.value);

  // 使用watch来监听delVisible属性的变化，
  // 然后更新centerDialogVisible的值
  watch(() => props.delVisible, (newVal) => {
    centerDialogVisible.value = newVal;
  });

  // 定义一个方法来发射cancelRow事件
  const cancelRow = () => {
    emit('cancelRow');
  };

  // 定义一个方法来发射confirm事件
  const confirm = () => {
    emit('confirm');
  };

  const handleClose = () => {
  // 当对话框关闭时，发射一个自定义事件给父组件
  emit('closeDialog');
 };
  </script>
  